<template>
	<view>
		<view class="nav">
			<scroll-view scroll-x="true" class="left">
				<view style="display: flex;height: 100%;">
					<block v-for="item in navList" :key="item.id">
						<view class="item" :class="{'nav-active':item.id==navId}" :data-id="item.id" @click="chooseNav">
							{{item.category}}
						</view>
					</block>

				</view>
			</scroll-view>

			<!-- <image src="../../static/images/search.png" style=""></image> -->
		</view>

		<view class="music" style="padding-bottom: 140rpx;padding-top: 100rpx;">
			<block v-for="item in musicList" :key="item">
				<view class="item">
					<view class="left">
						<image src="../../static/images/play.png" style="height: 70rpx;width: 70rpx;"
							:data-url="item.musicPath" @click="playMusic"></image>
						<view class="top">
							<view>{{item.title}}</view>
							<view class="miao">
								<!-- {{item.id}}=={{chooseMusicList.id}} -->
								<!-- 8秒 -->
							</view>
						</view>

					</view>
					<!-- <image v-if="item.isChoose" src="../../static/images/choose.png" class="choose-box"
						:data-id="item.id" :data-type="false" @click="chooseMusic"></image>
					<image v-else src="../../static/images/no-choose.png" :data-id="item.id" :data-type="true"
						class="choose-box" @click="chooseMusic"></image> -->


					<image v-if="item.id==chooseMusicList.id" src="../../static/images/choose.png" class="choose-box"
						:data-item="item" :data-type="false" @click="chooseMusic"></image>
					<image v-else src="../../static/images/no-choose.png" :data-item="item" :data-type="true"
						class="choose-box" @click="chooseMusic"></image>
				</view>
			</block>

		</view>


		<view class="footer-box">
			<view class="cancel">取消</view>
			<view class="submit" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
	import Http from '../../utils/http'
	const http = new Http()
	const app = getApp()
	var audioObj = uni.createInnerAudioContext({
		useWebAudioImplement: false // 是否使用 WebAudio 作为底层音频驱动，默认关闭。对于短音频、播放频繁的音频建议开启此选项，开启后将获得更优的性能表现。由于开启此选项后也会带来一定的内存增长，因此对于长音频建议关闭此选项
	})
	export default {
		data() {
			return {
				navId: 0,
				navList: [{
					"id": 0,
					category: "推荐"
				}],
				musicList: [],
				// chooseMusicList: [

				// ],
				chooseMusicList: {},
				currentPage: 1
			}
		},

		async onLoad() {
			let res = await http.get("v1/music/category")
			res.data.data.forEach(item => {
				this.navList.push(item)
			})
			this.getMusicListByCategoryId(0, this.currentPage)
		},
		onReachBottom() {
			var currentPage = this.currentPage + 1
			this.currentPage = currentPage
			this.getMusicListByCategoryId(this.navId, currentPage)
		},
		onUnload() {
			audioObj.stop() // 播放
		},
		methods: {
			playMusic(e) {
				audioObj.stop()
				console.log(e.currentTarget.dataset);
				var audioUrl = e.currentTarget.dataset.url
				audioObj.src = "https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/" + audioUrl
				audioObj.play() // 播放
			},
			async chooseNav(e) {
				this.navId = e.currentTarget.dataset.id
				this.currentPage = 1
				this.musicList = []
				this.chooseMusicList = {}
				await this.getMusicListByCategoryId(e.currentTarget.dataset.id, 1)
				// if(this.chooseMusicList.length<1){
				// 	return false;
				// }
				// for (let i = 0; i < this.musicList.length; i++) {
				// 	this.musicList[i].isChoose = false
				// 	for(let j=0;j<this.chooseMusicList.length;j++){
				// 		if(this.musicList[i].id == this.chooseMusicList[j].id){
				// 			this.musicList[i].isChoose = true
				// 			break
				// 		}
				// 	}

				// }
			},
			async getMusicListByCategoryId(id, currentPage) {
				let res = await http.get(
					`v1/music/getMusicListByCategoryId?categoryId=${id}&currentPage=${currentPage}`)
				if (res.data.data.length > 0) {
					res.data.data.forEach(item => {
						this.musicList.push(item)
					})

				} else {
					uni.showToast({
						title: "暂无更多数据",
						icon: "none"
					})
				}
			},
			chooseMusic(e) {
				console.log(e);
				let item = e.currentTarget.dataset.item
				let type = e.currentTarget.dataset.type
				this.chooseMusicList = item
				// for (let i = 0; i < this.musicList.length; i++) {
				// 	if (this.musicList[i].id == id) {
				// 		this.musicList[i].isChoose = type
				// 		if (type == true) {
				// 			this.chooseMusicList.push({
				// 				'id': this.musicList[i].id,
				// 				"mediaURL":'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/'+this.musicList[i].musicPath
				// 			})
				// 		} else {
				// 			this.chooseMusicList.splice(i, 1)
				// 		}
				// 		break
				// 	}
				// }


			},
			submit() {
				if (this.chooseMusicList.id != undefined) {
					let item = [{
						'id': this.chooseMusicList.id,
						"mediaURL": 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' + 
							this.chooseMusicList.musicPath
					}]
					var pages = getCurrentPages()
					let prePage = pages[pages.length - 2]
					prePage.$vm._data.form.audioList = item
					prePage.$vm._data.isChooseMusic = true
					audioObj.stop() // 播放
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.showToast({
						title: "请选择一条音乐，或者直接返回上一个页面",
						icon: "none"
					})
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #f1f1f1;
	}

	.nav {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		background: #fff;
		display: flex;
		justify-content: space-between;

		.left {
			height: 80rpx;
			white-space: nowrap;
			width: 100%;
			line-height: 80rpx;

			.item {
				margin-right: 30rpx;
				font-size: 32rpx;
				display: inline-block;
			}

			.item:nth-child(1) {
				margin-left: 30rpx;
			}

		}
	}

	.nav-active {
		color: #00008B;
	}

	.music {
		.item {
			margin: 20rpx;
			background: #fff;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			padding: 20rpx;

			.left {
				display: flex;
				flex: 1;
				align-items: center;

				.top {
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #333;
					flex: 1;

				}

				.miao {
					font-size: 26rpx;
					color: #666;
				}
			}

			.choose-box {
				height: 40rpx;
				width: 40rpx;
				margin: 0 30rpx
			}
		}
	}

	.footer-box {
		position: fixed;
		width: 100%;
		height: 100rpx;
		z-index: 99;
		bottom: 0;
		right: 0;
		left: 0;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;

		.cancel {
			margin: 0 30rpx;
			background: #eee;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
		}

		.submit {
			margin: 0 30rpx;
			background: #00008B;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			color: #ffffff;
		}
	}
</style>